<template>
    <n-modal
        v-model:show="showModal"
        class="custom-modal-public"
        :mask-closable="false"
        v-bind="modalProps"
    >
        <n-card
            :style="{ width: `${width}px` }"
            :title="title"
            :aria-modal="false"
            v-bind="cardProps"
        >
            <template #header-extra>
                <NIcon class="close-icon" :size="28" @click="onClose">
                    <CloseOutline />
                </NIcon>
            </template>
            <slot></slot>
            <template #footer>
                <div class="foot">
                    <NButton @click="onClose">取消</NButton>
                    <NButton type="primary" @click="onSave">确定</NButton>
                </div>
            </template>
        </n-card>
    </n-modal>
</template>

<script setup>
import { CloseOutline } from '@vicons/ionicons5';
import { computed } from 'vue';

const emit = defineEmits(['update:modelValue', 'save']);
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: [String, Number],
        default: 600
    },
    modalProps: {
        type: Object,
        default: () => ({})
    },
    cardProps: {
        type: Object,
        default: () => ({})
    }
});
const showModal = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const onClose = () => {
    showModal.value = false;
};
// 保存
const onSave = () => {
    emit('save');
};
</script>
<style lang="less">
.custom-modal-public {
    .n-card-header {
        padding: 12px 20px;
        border-bottom: 1px solid var(--grey-300);
        box-sizing: border-box;
    }

    .n-card__content {
        padding: 0;
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    .n-card__footer {
        padding: 12px 20px;
        padding-top: var(--grey-300);
    }
}
</style>
<style lang="less" scoped>
.close-icon {
    cursor: pointer;
    border-radius: 4px;

    &:hover {
        background-color: var(--grey-300);
    }
}

.foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
</style>
